<template>
  <div class="contain">
    <button class="change" @click="change('pre')">上一页</button>
    <!-- 传什么进去 -->
    <button
      class="btn"
      @click="handle(page)"
      :class="{
        active: curent === 1,
      }"
    >
      1
    </button>
    <button
      class="btn"
      @click="handle(2)"
      :class="{
        active: curent === 2,
      }"
    >
      2
    </button>
    <button
      class="btn"
      @click="handle(3)"
      :class="{
        active: curent === 3,
      }"
    >
      3
    </button>
    <button
      class="btn"
      @click="handle(4)"
      :class="{
        active: curent === 4,
      }"
    >
      4
    </button>
    <button
      class="btn"
      @click="handle(5)"
      :class="{
        active: curent === 5,
      }"
    >
      5
    </button>
    <button
      class="btn"
      @click="handle(total)"
      :class="{
        active: curent === total,
      }"
    >
      {{ total }}
    </button>
    <button class="change" @click="change('next')">下一页</button>
  </div>
</template>

<script>
export default {
  name: "Paginat",
  data() {
    return {
      //
      page: 1,
      // 选中页
      curent: 1,
      total: 6,
    };
  },
  /*
  报错
  vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid component name: "  Paginat". 
  Component names should conform to valid custom element name in html5 specification.
  */
  methods: {
    handle(val) {
      this.curent = val;
    },
    change(val) {
      if (val === "pre") {
        // 极值判断
        if (this.curent <= 1) {
          this.curent = 1;
          return;
        }
        this.curent--;
      }
      if (val === "next") {
        if (this.curent >= this.total) {
          this.curent === this.total;
          return;
        }
        this.curent++;
      }
    },
  },
};
</script>

<style scoped>
.contain {
  display: flex;
  justify-content: center;
  /* padding-left: 160px; */
}
.contain button {
  border: none;
  margin: 0 5px;
}
.active {
  border-bottom: 2px solid #555;
}
</style>